<template>
  <div class="bar-gadget-css" style="width:100%;height:100%">

    <Portal to="right-disable" style="width:100%;height:100%;"
            v-loading="loading"
            :disabled="!queryModelDefaultSetting.showSetting">
      <DashboardInterceptConsumer :gadgetId="id"
                                  shadow="hover"
                                  @mouseenter="mouseenter(true)"
                                  @mouseleave="mouseenter(false)"
                                  style="width:100%;height: 100%;border:0">
        <el-card shadow="never"
                 style="width:100%;height: 100%;border:0"
                 class="aui-card--fill">
          <div style="width:100%;height:100%;">
            <div class="cardHeader"
                 @mouseenter="mouseenter(true)"
                 @mouseleave="mouseenter(false)"
                 v-if="(widgetName && widgetName.trim().length>0) || (gadgetSetting&&gadgetSetting.headerDescription && gadgetSetting.headerDescription.trim().length>0)">
              <GadgetTitle :gadgetSetting="gadgetSetting"
                           :widgetName="widgetName"></GadgetTitle>
              <div>
                <MoreMenu :slicaer='slicer'
                          :fitToHeight='fitToHeight'
                          :gadgetId='id'
                          :gadgetType='gadgetInfo.com'
                          @updateQuery="query"
                          :widgetName="widgetName"
                          :businessType="gadgetInfo.businessType"
                          :id="gadgetInfo.id"
                          @showQueryModel="showQueryModel" />
              </div>
            </div>
            <div class="control-section control-section2">
              <div class=content-wrapper
                   style="width:100%;height:100%;">
                <div v-if="isHasData"
                  style="width:100%;height:100%;">
                  <div class="tabsMain" style="width:100%;height:100%;">
                    <ul class="tabsList" style="height:40px">
                      <li :class="activeName == index ? 'active' : ''" v-for="(item, index) of list" :key="index" style="width:104px"
                        @click="handleClick(item, index)">{{ item[gadgetSetting.litikufenzu] }}</li>
                    </ul>
                    <div v-if="activeName === index" v-for="(item,index) in list" :key="index" style="width:100%;height:calc(100% - 40px);">
                      <el-table
                        border
                        :cell-class-name="tableCellClassName"
                        height="100%"
                        :data="comData(item.tableData)"
                        :cell-style="handleCellStyle"
                        :row-style="handleRowStyle"
                        @cell-click="tableCellClick"
                        style="width: 100%;">
                        <el-table-column
                          :prop="gadgetSetting.litikuxdimension"
                          width="32">
                        </el-table-column>
                        <el-table-column v-for="data in setColumn(item.tableData)" :key="data[gadgetSetting.litikuydimension]"
                          :prop="data"
                          :label="data"
                          width="32">
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                </div>
                <div v-else
                     class="gadget-no-newdata">
                    <div class="widgets-no-data">
                    <div :style="{'fontSize':fontSizeStr1}">{{$t('custom.component.gadget.nodata')}}</div>
                    <!-- <div class="widgets-tip"> <a :href="widgetNoDataWiki"  :style="{'fontSize':fontSizeStr2}"
                         target="black">{{$t('custom.component.gadget.nodatatip')}}</a> </div> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
        <Lastupdatetime v-if="currentTime"
                        :currentTime="currentTime"
                        :linkedDatasetList="linkedDatasetList"
                        :errorStatus="errorStatus"
                        @updateQuery="query()"></Lastupdatetime>
      </DashboardInterceptConsumer>

    </Portal>
    <model :showSetting="queryModelDefaultSetting.showSetting"
           @queryModelClosed="queryModelClosed"
           :dataInfo="queryModelDefaultSetting.dataInfo"
           :updateGadget="upgradeGadgetSetting"
           :slicer='slicer' />
    <DrillThrough :gadgetId='id'
                  :pageId='pageId'
                  :slicer="slicer"
                  :queryId="queryId"
                  ref="drill-through"
                  :widgetName='widgetName +":"+ ltkSite' />
    <div style="position:absolute;left:9999px;">
      <component v-for="(item, index) in formatComponentList"
                 :key="index"
                 :is="item"
                 :ref="item"
                 gadgetType='notgridgadget' />
    </div>
  </div>
</template>

<script>
import mixinGadgetViewModule from '@/mixins/gadget-view-module'
import Lastupdatetime from '@/components/last-update-time/index.vue'
import { defaultGadgetSettingList } from '@/utils/data-json'
import mixinFormatViewModule from '@/mixins/format-gadget-view-module'
import * as Echarts from 'echarts'
import { getUUID } from '@/utils'
import { splitLable, keepDecimalPlaces } from '@/utils/common'
import { handleSort, showColumnLimit } from '@/components/gadget/chart-bar/handleData'
import ecStat from 'echarts-stat'
import DrillThrough from '@/components/gadget-drill-through-litiku/index'
export default ({
  mixins: [mixinGadgetViewModule, mixinFormatViewModule],
  components: { Lastupdatetime, model: () => import('@/components/gadget/query-model/query-model'),DrillThrough },
  data: function () {
    return {
      selfGadgetUuid: getUUID(),
      repeatNumber: 0,
      chartOption: {
        color: [],
        animation: 'auto',
        title: {
          text: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br />{b}: {c}'
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ['line', 'bar'] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        legend: {
          type: 'scroll',
          top: 20,
          width: '90%',
          data: []
        },
        grid: {
          // top: '11%',
          left: '10px',
          right: '10px',
          bottom: '10px',
          width: '95%',
          // height: '85%',
          containLabel: true
        },
        xAxis: {
          boundaryGap: true,
          data: [],
          type: 'category',
          axisLabel: {
            rotate: 315,
            formatter: '{value}',
            hideOverlap: true,
            overflow: 'truncate',
            ellipsis: '...'
          },
          name: '',
          nameLocation: 'end',
          nameGap: 5,
          nameRotate: 270
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            inside: false,
            show: true,
            hideOverlap: true,
            overflow: 'truncate',
            ellipsis: '...'
          },
          name: '',
          axisLine: {
            show: true
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: true
          }
        },
        series: []
      },
      chartDom: null,
      currentTime: null,
      queryData: [],
      selectFields: [],
      theme: 'Material',
      dataSource: [{ name: 'a', data: [{ x: 0, y: 0 }] }],
      gadgetSetting: null,
      loading: false,
      chartWidth: '600px',
      dataSource1: null,
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: this.pageId,
          gadgetId: this.id,
          gadgetType: 'litikugadget',
          gadgetSetting: this._.find(defaultGadgetSettingList, { gadgetType: 'litikugadget' }).gadgetSetting
        }
      },
      queryId: '',
      queryDrillthrough: {},
      queryDrillthroughList: [],
      widgetName: '',
      conditionFormat: [],
      linkedDatasetList: [],
      activeName:0,
      list: [],
      heightoffset: 60,
      ltkSite: ''
    }
  },
  beforeCreate () {
    // this.$options.components.model = () => import('@/components/gadget/query-model/query-model')
  },
  created () {
    this.gadgetHeight = (this.gadgetInfo.h * 20) - 45
    // this.query()
    this.subscribeMessage('runReport', () => {
      this.query(this.refreshCount > 0 ? 'auto' : false)
      this.refreshCount = this.refreshCount + 1
    })
    this.$store.state.isWidget = false
  },
  // updated () {
  //   if (document.getElementById(`${this.selfGadgetUuid}`) && document.getElementById(`${this.selfGadgetUuid}`).offsetWidth) {
  //     let wW = document.getElementById(`${this.selfGadgetUuid}`).offsetWidth
  //     let wH = document.getElementById(`${this.selfGadgetUuid}`).offsetHeight
  //     this.gadgetSetting.titleFontSize = (parseInt(wW / 70) + parseInt(wH / 200))<10?'10px':(parseInt(wW / 70) + parseInt(wH / 200) + 'px')
  //   }
  // },
  methods: {
    handleClick (item,index) {
      this.activeName = index
    },
    setCustomColorX (option) {
      try {
        const conditionFormat = this.conditionFormat.filter(item => {
          if (item.dataForm.filters.rules.length !== 0) {
            return item.dataForm.filters.rules[0].key === this.gadgetSetting.valueFieldsNameMeasureX
          }
        })
        option.xAxis.data.map((item, index) => {
          conditionFormat.map(items => {
            let evalCode = ''
            if (items.dataForm.filters.rules[0].opt === '==' || items.dataForm.filters.rules[0].opt === '!=') {
              evalCode = `'${item}' ${items.dataForm.filters.rules[0].opt} '${items.dataForm.filters.rules[0].value}'`
            } else {
              evalCode = `${Number(item)} ${items.dataForm.filters.rules[0].opt} ${Number(items.dataForm.filters.rules[0].value)}`
            }
            // eslint-disable-next-line no-eval
            if (eval(evalCode) && option.series[0].data[index]) {
              option.series[0].data[index].itemStyle = {
                color: items.textColor
              }
            }
          })
        })
        if (this.gadgetSetting.stackedStatistics && this.gadgetSetting.type === 'StackingColumn') {
          handleSort(option, this.gadgetSetting.stackedStatisticsSort)
        }
        showColumnLimit(option, this.gadgetSetting.showColumnLimit)

      } catch (e) {
        console.log(e)
      }
      return option
    },
    updateChart (originData) {
      var _self = this
      _self.chartDom = document.getElementById(`${_self.selfGadgetUuid}`)
      if (!_self.chartDom) {
        setTimeout(() => {
          _self.repeatNumber++
          _self.updateChart(originData)
        }, 1000)
      } else if (!Array.isArray(originData) || (Array.isArray(originData) && originData.length === 0)) {
        Echarts.init(_self.chartDom).dispose()
      } else {
        _self.chartOption = _self.$options.data.call(_self).chartOption
        _self.repeatNumber = 0
        let myChart = Echarts.init(_self.chartDom, null, { renderer: 'svg'}) 
        // _self.chartOption.title.text = _self.gadgetSetting.title
        _self.chartOption.title.textStyle = { fontSize: _self.gadgetSetting.titleFontSize || 18 }
        // _self.chartOption.grid.height = _self.gadgetSetting.gridHeight
        // _self.chartOption.grid.top = _self.gadgetSetting.gridTop
        _self.chartOption.xAxis.name = _self.gadgetSetting.xName
        _self.chartOption.yAxis.name = _self.gadgetSetting.yName
        let fontSize = _self.gadgetSetting.labelFontSize
        _self.chartOption.yAxis.axisLabel.formatter = (value) => {
          //  return `${(value * 100.00).toFixed(2) + ' %'}`
          if (_self.gadgetSetting.yAxisPercentage) {
            return `${keepDecimalPlaces(value, '2', '*', 100)}%`
          } else {
            return `${value}`
          }
        }
        _self.chartOption.xAxis.data = originData.map(e => {
          return e[_self.gadgetSetting.valueFieldsNameMeasureX]
        })
        if (_self.gadgetSetting.manyMeasure) {
          _self.chartOption.legend.data = _self.gadgetSetting.valueFieldsNameManyY
          let lastList = []
          for (let ii = 0; ii < _self.chartOption.legend.data.length; ii++) {
            const groupItem = _self.chartOption.legend.data[ii]
            var arr = _self.conditionFormat
            var res = arr.filter(item => {
              if (item.dataForm.filters.rules.length !== 0) {
                return item.dataForm.filters.rules[0].key === groupItem
              }
            })
            lastList.push({
              name: groupItem,
              type: 'bar',
              barGap: '10%',
              label: {
                show: true,
                fontSize,
                formatter: '{c}'
              },
              data: []
            })
            for (let index = 0; index < originData.length; index++) {
              const element = originData[index]
              if (!Object.keys(originData[0]).includes(groupItem)) {
                break
              }
              lastList[lastList.findIndex(e => e.name === groupItem)].data[index] = {
                value: element[groupItem],
                itemStyle: {
                  // color: item.textColor
                }
              }
              if (res.length > 0) {
                res.forEach(item => {
                  let evalCode = ''
                  if (item.dataForm.filters.rules[0].opt === '==' || item.dataForm.filters.rules[0].opt === '!=') {
                    evalCode = `'${element[groupItem]}' ${item.dataForm.filters.rules[0].opt} '${item.dataForm.filters.rules[0].value}'`
                  } else {
                    evalCode = `${element[groupItem]} ${item.dataForm.filters.rules[0].opt} ${item.dataForm.filters.rules[0].value}`
                  }
                  // eslint-disable-next-line no-eval
                  if (eval(evalCode)) {
                    lastList[lastList.findIndex(e => e.name === groupItem)].data[index] = {
                      value: element[groupItem],
                      itemStyle: {
                        color: item.textColor
                      }
                    }
                  }
                })
              }
            }
            if (lastList[lastList.findIndex(e => e.name === groupItem)].data.length === 0) {
              lastList.splice(lastList.findIndex(e => e.name === groupItem), 1)
            }
          }
          _self.chartOption.series = lastList
          _self.chartOption.legend.data = _self.chartOption.series.map(e => {
            return e.name
          })
          if (_self.gadgetSetting.type === 'StackingColumn') {
            for (let i = 0; i < _self.chartOption.series.length; i++) {
              _self.chartOption.series[i]['stack'] = 'stack'
            }
          }
          if (_self.gadgetSetting.type === 'Bar') {
            let oldX = _self._.cloneDeep(_self.chartOption.xAxis)
            let oldY = _self._.cloneDeep(_self.chartOption.yAxis)
            _self.chartOption.xAxis = oldY
            _self.chartOption.yAxis = oldX
            _self.chartOption.yAxis.nameRotate = 0
            _self.chartOption.yAxis.axisLabel.rotate = 0
            _self.chartOption.xAxis.nameGap = 10
            _self.chartOption.xAxis.nameRotate = -90
            _self.chartOption.yAxis.axisLabel.formatter = (value) => {
              return `${splitLable(_self.setFormatFunctionForChart(_self.selectFields, value, _self.gadgetSetting.valueFieldsNameMeasureX))}`
            }
          }
          _self.chartOption.xAxis.axisLabel.formatter = (value) => {
            return `${splitLable(_self.setFormatFunctionForChart(_self.selectFields, value, _self.gadgetSetting.type === 'Bar' ? _self.gadgetSetting.valueFieldsNameMeasureY : _self.gadgetSetting.valueFieldsNameMeasureX))}`
          }
          _self.chartOption.xAxis.axisLabel.textStyle = { fontSize: _self.gadgetSetting.xAxisFontSize?_self.gadgetSetting.xAxisFontSize:"12" }

          _self.chartOption.tooltip.formatter = (params) => {
            if (_self.gadgetSetting.valueFieldsNameMeasureL) {
              return `${_self.setFormatFunctionForChart(_self.selectFields, params.name, _self.gadgetSetting.valueFieldsNameMeasureX)} <br /> ${params.seriesName}:
                  ${_self.setFormatFunctionForChart(_self.selectFields, params.value, params.seriesName)} <br /> ${params.seriesName}:
                  ${_self.setFormatFunctionForChart(_self.selectFields, params.value, params.seriesName)}`
            } else {
              return `${_self.setFormatFunctionForChart(_self.selectFields, params.name, _self.gadgetSetting.valueFieldsNameMeasureX)} <br /> ${params.seriesName}:
                  ${_self.setFormatFunctionForChart(_self.selectFields, params.value, params.seriesName)}`
            }
          }
          for (var iii = 0; iii < _self.chartOption.series.length; iii++) {
            const element = _self.chartOption.series[iii]
            element.label.formatter = (params) => {
              return `${_self.setFormatFunctionForChart(_self.selectFields, params.value, params.seriesName)}`
            }
          }

          if (_self.gadgetSetting.valueFieldsNameMeasureL) { // && !_self.gadgetSetting.manyMeasure
            _self.chartOption = _self.resetOptions(_self.chartOption, originData)
            const element = _self.chartOption.series[_self.chartOption.series.length - 1]
            element.label.formatter = (params) => {
              return `${_self.setFormatFunctionForChart(_self.selectFields, params.value, _self.gadgetSetting.valueFieldsNameMeasureL)}`
            }
          }
          if (_self.gadgetSetting.color.length > 0) {
            _self.chartOption.color = _self.gadgetSetting.color
          }
          if (_self.gadgetSetting.goal && _self.gadgetSetting.goalcolor) {
            _self.setGoal()
          }
          if (_self.gadgetSetting.showYaxisRight) {
            if (_self.gadgetSetting.type === 'Bar') {
              _self.setXaxisRight(_self.chartOption)
            } else {
              _self.setYaxisRight(_self.chartOption)
              this.chartOption.xAxis.nameGap = 25
            }
          }
          if (Array.isArray(_self.chartOption.yAxis)) {
            _self.chartOption.yAxis[0].nameLocation = _self.gadgetSetting.yAxisNameLocation ? _self.gadgetSetting.yAxisNameLocation : 'end'
            _self.chartOption.yAxis[0].nameGap = Number(_self.gadgetSetting.yAxisNameGap) ? Number(_self.gadgetSetting.yAxisNameGap) : 10
            _self.chartOption.yAxis[0].nameRotate = Number(_self.gadgetSetting.yAxisnameRotate) ? Number(_self.gadgetSetting.yAxisnameRotate) : 0
            _self.chartOption.yAxis[0].nameTextStyle = {
              align: 'left'
            }
          } else {
            _self.chartOption.yAxis.nameLocation = _self.gadgetSetting.yAxisNameLocation ? _self.gadgetSetting.yAxisNameLocation : 'end'
            _self.chartOption.yAxis.nameGap = Number(_self.gadgetSetting.yAxisNameGap) ? Number(_self.gadgetSetting.yAxisNameGap) : 10
            _self.chartOption.yAxis.nameRotate = Number(_self.gadgetSetting.yAxisnameRotate) ? Number(_self.gadgetSetting.yAxisnameRotate) : 0
            _self.chartOption.yAxis.nameTextStyle = {
              align: 'left'
            }
          }
          _self.setLabel(_self.chartOption)
          this.chartOption.yAxis.splitLine = { show: false }
          _self.chartOption.yAxis.splitLine.show = _self.gadgetSetting.splitLineShow

          myChart.setOption(this.setCustomColorX(_self.chartOption))
          myChart.on('click', params => {
            _self.setDrillThroughInfo(params)
          })
          _self.$erd.listenTo(_self.chartDom, element => {
          _self.$nextTick(() => {
            _self.resized()
          })
        })
        } else {
          if (_self.gadgetSetting.valueFieldsNameMeasureGroup && _self.gadgetSetting.valueFieldsNameMeasureGroup !== 'group') {
            let legendList = _self._.uniq(originData.map(e => {
              return e[_self.gadgetSetting.valueFieldsNameMeasureGroup]
            }))
            // let legendList = originData.map(e => {
            //   return e[_self.gadgetSetting.valueFieldsNameMeasureGroup]
            // })
            _self.chartOption.xAxis.data = _self._.uniq(originData.map(e => {
              return e[_self.gadgetSetting.valueFieldsNameMeasureX]
            }))
            let temp = []
            for (let i = 0; i < legendList.length; i++) {
              const element = legendList[i]
              var arrList = originData.filter(item => {
                return element === item[_self.gadgetSetting.valueFieldsNameMeasureGroup]
              })
              let tempData = _self.chartOption.xAxis.data.map(e => {
                let dataItem = arrList.find(ee => { return ee[_self.gadgetSetting.valueFieldsNameMeasureX] === e })
                if (dataItem) {
                  return dataItem[_self.gadgetSetting.valueFieldsNameMeasureY]
                } else {
                  return null
                }
              })
              temp.push({
                name1: `${element}`,
                name: _self.setFormatFunctionForChart(_self.selectFields, element, _self.gadgetSetting.valueFieldsNameMeasureGroup),
                type: 'bar',
                label: {
                  show: true,
                  fontSize
                },
                data: tempData
              })
            }
            _self.chartOption.series = temp
            if (_self.gadgetSetting.type === 'StackingColumn') {
              for (let i = 0; i < _self.chartOption.series.length; i++) {
                _self.chartOption.series[i]['stack'] = 'stack'
              }
            }
            delete _self.chartOption.legend.data
            _self.chartOption.xAxis.axisLabel.formatter = (value) => {
              return `${splitLable(_self.setFormatFunctionForChart(_self.selectFields, value, _self.gadgetSetting.valueFieldsNameMeasureX))}`
            }
            _self.chartOption.xAxis.axisLabel.textStyle = { fontSize: _self.gadgetSetting.xAxisFontSize?_self.gadgetSetting.xAxisFontSize:"12" }
            _self.chartOption.tooltip.formatter = (params) => {
              return `${params.seriesName} <br /> ${_self.setFormatFunctionForChart(_self.selectFields, params.name, _self.gadgetSetting.valueFieldsNameMeasureX)}:
              ${_self.setFormatFunctionForChart(_self.selectFields, params.value, _self.gadgetSetting.valueFieldsNameMeasureY)}`
            }
            for (var ii = 0; ii < _self.chartOption.series.length; ii++) {
              const element = _self.chartOption.series[ii]
              if (element.label && element.label.show) {
                element.label.formatter = (params) => {
                  return `${_self.setFormatFunctionForChart(_self.selectFields, params.value, _self.gadgetSetting.valueFieldsNameMeasureY)}`
                }
              }
            }
            if (_self.gadgetSetting.valueFieldsNameMeasureL) { // && !_self.gadgetSetting.manyMeasure
              _self.chartOption = _self.resetOptions(_self.chartOption, originData)
              const element = _self.chartOption.series[_self.chartOption.series.length - 1]
              element.label.formatter = (params) => {
                return `${_self.setFormatFunctionForChart(_self.selectFields, params.value, _self.gadgetSetting.valueFieldsNameMeasureL)}`
              }
            }
            if (_self.gadgetSetting.color.length > 0) {
              _self.chartOption.color = _self.gadgetSetting.color
            }
            if (_self.gadgetSetting.goal && _self.gadgetSetting.goalcolor) {
              _self.setGoal()
            }
            if (_self.gadgetSetting.showYaxisRight) {
              if (_self.gadgetSetting.type === 'Bar') {
                _self.setXaxisRight(_self.chartOption)
              } else {
                _self.setYaxisRight(_self.chartOption)
                this.chartOption.xAxis.nameGap = 25
              }
            }
            if (Array.isArray(_self.chartOption.yAxis)) {
              _self.chartOption.yAxis[0].nameLocation = _self.gadgetSetting.yAxisNameLocation ? _self.gadgetSetting.yAxisNameLocation : 'end'
              _self.chartOption.yAxis[0].nameGap = Number(_self.gadgetSetting.yAxisNameGap) ? Number(_self.gadgetSetting.yAxisNameGap) : 10
              _self.chartOption.yAxis[0].nameRotate = Number(_self.gadgetSetting.yAxisnameRotate) ? Number(_self.gadgetSetting.yAxisnameRotate) : 0
              _self.chartOption.yAxis[0].nameTextStyle = {
                align: 'left'
              }
            } else {
              _self.chartOption.yAxis.nameLocation = _self.gadgetSetting.yAxisNameLocation ? _self.gadgetSetting.yAxisNameLocation : 'end'
              _self.chartOption.yAxis.nameGap = Number(_self.gadgetSetting.yAxisNameGap) ? Number(_self.gadgetSetting.yAxisNameGap) : 10
              _self.chartOption.yAxis.nameRotate = Number(_self.gadgetSetting.yAxisnameRotate) ? Number(_self.gadgetSetting.yAxisnameRotate) : 0
              _self.chartOption.yAxis.nameTextStyle = {
                align: 'left'
              }
            }
            _self.setLabel(_self.chartOption)
            this.chartOption.yAxis.splitLine = { show: false }
            _self.chartOption.yAxis.splitLine.show = _self.gadgetSetting.splitLineShow
            myChart.setOption(this.setCustomColorX(_self.chartOption))
            myChart.on('click', params => {
              params.seriesName = _self.chartOption.series[params.seriesIndex].name1
              let findObj = {}
              for (let i = 0; i < originData.length; i++) {
                const element = originData[i]
                let selectList = []
                Object.values(element).forEach(item => {
                  if (params.name === String(item)) {
                    selectList.push(item)
                  }
                  if (params.seriesName === String(item)) {
                    selectList.push(item)
                  }
                  if (selectList.length === 2) {
                    findObj = element
                  }
                })
              }
              params.selectObj = findObj
              _self.setDrillThroughInfoMoreDimension(params)
            })
            _self.$erd.listenTo(_self.chartDom, element => {
              _self.$nextTick(() => {
                _self.resized()
              })
            })
          } else {
            let tempSeries = [{
              name: (Array.isArray(_self.gadgetSetting.valueFieldsNameManyY) && _self.gadgetSetting.valueFieldsNameManyY.length === 1)
                ? _self.gadgetSetting.valueFieldsNameManyY[0]
                : _self.gadgetSetting.valueFieldsNameMeasureY,
              type: 'bar',
              label: {
                show: true,
                fontSize
              },
              data: []
            }]
            var arr2 = _self.conditionFormat
            var res2 = arr2.filter(item => {
              if (item.dataForm.filters.rules.length !== 0) {
                return item.dataForm.filters.rules[0].key === _self.gadgetSetting.valueFieldsNameMeasureY
              }
            })
            for (let index = 0; index < originData.length; index++) {
              const element = originData[index]
              // let colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
              tempSeries[0].data[index] = {
                value: (Array.isArray(_self.gadgetSetting.valueFieldsNameManyY) && _self.gadgetSetting.valueFieldsNameManyY.length === 1)
                  ? element[_self.gadgetSetting.valueFieldsNameManyY[0]]
                  : element[_self.gadgetSetting.valueFieldsNameMeasureY],
                itemStyle: {
                  // color: element[_self.gadgetSetting.valueFieldsNameMeasureY] > 1 ? 'red' : 'blue'
                }
              }
              if (res2.length > 0) {
                res2.forEach((item, i) => {
                  let evalCode = ''
                  if (item.dataForm.filters.rules[0].opt === '==' || item.dataForm.filters.rules[0].opt === '!=') {
                    evalCode = `'${element[_self.gadgetSetting.valueFieldsNameMeasureY]}' ${item.dataForm.filters.rules[0].opt} '${item.dataForm.filters.rules[0].value}'`
                  } else {
                    evalCode = `${element[_self.gadgetSetting.valueFieldsNameMeasureY]} ${item.dataForm.filters.rules[0].opt} ${item.dataForm.filters.rules[0].value}`
                  }
                  // eslint-disable-next-line no-eval
                  if (eval(evalCode)) {
                    if (tempSeries[0].data[index]) tempSeries[0].data[index].itemStyle.color = item.textColor
                  }
                })
              }
            }
            _self.chartOption.series = tempSeries
            if (_self.gadgetSetting.type === 'StackingColumn') {
              for (let i = 0; i < _self.chartOption.series.length; i++) {
                _self.chartOption.series[i]['stack'] = 'stack'
              }
            }
            if (_self.gadgetSetting.type === 'Bar') {
              let oldX = _self._.cloneDeep(_self.chartOption.xAxis)
              let oldY = _self._.cloneDeep(_self.chartOption.yAxis)
              _self.chartOption.xAxis = oldY
              _self.chartOption.yAxis = oldX
              _self.chartOption.yAxis.nameRotate = 0
              _self.chartOption.yAxis.axisLabel.rotate = 0
              _self.chartOption.xAxis.nameGap = 10
              _self.chartOption.xAxis.nameRotate = -90
              _self.chartOption.yAxis.axisLabel.formatter = (value) => {
                return `${splitLable(_self.setFormatFunctionForChart(_self.selectFields, value, _self.gadgetSetting.valueFieldsNameMeasureX))}`
              }
            }
            _self.chartOption.xAxis.axisLabel.formatter = (value) => {
              return `${splitLable(_self.setFormatFunctionForChart(_self.selectFields, value, _self.gadgetSetting.type === 'Bar' ? _self.gadgetSetting.valueFieldsNameMeasureY : _self.gadgetSetting.valueFieldsNameMeasureX))}`
            }
            _self.chartOption.xAxis.axisLabel.textStyle = { fontSize: _self.gadgetSetting.xAxisFontSize?_self.gadgetSetting.xAxisFontSize:"12" }
            _self.chartOption.tooltip.formatter = (params) => {
              if (_self.gadgetSetting.valueFieldsNameMeasureL) {
                return `${_self.setFormatFunctionForChart(_self.selectFields, params.name, _self.gadgetSetting.valueFieldsNameMeasureX)} <br /> ${params.seriesName}:
                  ${_self.setFormatFunctionForChart(_self.selectFields, params.value, params.seriesName)} <br /> ${params.seriesName}:
                  ${_self.setFormatFunctionForChart(_self.selectFields, params.value, params.seriesName)}`
              } else {
                return `${_self.setFormatFunctionForChart(_self.selectFields, params.name, _self.gadgetSetting.valueFieldsNameMeasureX)} <br /> ${params.seriesName}:
                  ${_self.setFormatFunctionForChart(_self.selectFields, params.value, params.seriesName)}`
              }
            }
            for (var i = 0; i < _self.chartOption.series.length; i++) {
              const element = _self.chartOption.series[i]
              element.label.formatter = (params) => {
                return `${_self.setFormatFunctionForChart(_self.selectFields, params.value, params.seriesName)}`
              }
            }

            if (_self.gadgetSetting.valueFieldsNameMeasureL) { // && !_self.gadgetSetting.manyMeasure
              _self.chartOption = _self.resetOptions(_self.chartOption, originData)
              const element = _self.chartOption.series[_self.chartOption.series.length - 1]
              element.label.formatter = (params) => {
                return `${_self.setFormatFunctionForChart(_self.selectFields, params.value, _self.gadgetSetting.valueFieldsNameMeasureL)}`
              }
            }
            if (_self.gadgetSetting.color.length > 0) {
              _self.chartOption.color = _self.gadgetSetting.color
            }
            if (_self.gadgetSetting.goal && _self.gadgetSetting.goalcolor) {
              _self.setGoal()
            }
            if (_self.gadgetSetting.showTrendLine) {
              var data = []
              originData.forEach((item, index) => {
                data.push([
                  index, Number(item[_self.gadgetSetting.valueFieldsNameMeasureY])
                ])
              })
              var temp = _self.getRegressionChart(data, '', 'regression-chart', _self.gadgetSetting.showTrendLine, 1, myChart)
              _self.chartOption.series.push(temp)
            }
            if (_self.gadgetSetting.showYaxisRight) {
              if (_self.gadgetSetting.type === 'Bar') {
                _self.setXaxisRight(_self.chartOption)
              } else {
                _self.setYaxisRight(_self.chartOption)
                this.chartOption.xAxis.nameGap = 25
              }
            }
            if (Array.isArray(_self.chartOption.yAxis)) {
              _self.chartOption.yAxis[0].nameLocation = _self.gadgetSetting.yAxisNameLocation ? _self.gadgetSetting.yAxisNameLocation : 'end'
              _self.chartOption.yAxis[0].nameGap = Number(_self.gadgetSetting.yAxisNameGap) ? Number(_self.gadgetSetting.yAxisNameGap) : 10
              _self.chartOption.yAxis[0].nameRotate = Number(_self.gadgetSetting.yAxisnameRotate) ? Number(_self.gadgetSetting.yAxisnameRotate) : 0
              _self.chartOption.yAxis[0].nameTextStyle = {
                align: 'left'
              }
            } else {
              _self.chartOption.yAxis.nameLocation = _self.gadgetSetting.yAxisNameLocation ? _self.gadgetSetting.yAxisNameLocation : 'end'
              _self.chartOption.yAxis.nameGap = Number(_self.gadgetSetting.yAxisNameGap) ? Number(_self.gadgetSetting.yAxisNameGap) : 10
              _self.chartOption.yAxis.nameRotate = Number(_self.gadgetSetting.yAxisnameRotate) ? Number(_self.gadgetSetting.yAxisnameRotate) : 0
              _self.chartOption.yAxis.nameTextStyle = {
                align: 'left'
              }
            }
            _self.setLabel(_self.chartOption)
            this.chartOption.yAxis.splitLine = { show: false }
            _self.chartOption.yAxis.splitLine.show = _self.gadgetSetting.splitLineShow

            myChart.setOption(this.setCustomColorX(_self.chartOption), !!_self.gadgetSetting.showTrendLine)
            myChart.on('click', params => {
              _self.setDrillThroughInfo(params)
            })
            _self.$erd.listenTo(_self.chartDom, element => {
              _self.$nextTick(() => {
                _self.resized()
              })
            })
          }
        }
      }
    },
    setGoal () {
      this.chartOption.series.push({
        data: [Number(this.gadgetSetting.goal)],
        type: 'line',
        silent: true,
        symbolSize: 0,
        markLine: {
          silent: true,
          data: this.gadgetSetting.type === 'Bar' ? [
            { name: 'Goal', xAxis: Number(this.gadgetSetting.goal) }
          ] : [
            { name: 'Goal', yAxis: Number(this.gadgetSetting.goal) }
          ],
          label: {
            position: 'insideStart'
          },
          symbolSize: 0,
          lineStyle: {
            type: 'solid',
            width: 1,
            color: this.gadgetSetting.goalcolor
          }
        }
      })
    },
    resetOptions (val, data) {
      val.series.push(JSON.parse(JSON.stringify(val.series[val.series.length - 1])))
      val.series[val.series.length - 1].type = 'line'
      val.series[val.series.length - 1].name = this.gadgetSetting.valueFieldsNameMeasureL
      val.series[val.series.length - 1].data.forEach((item, index) => {
        item.value = data[index][this.gadgetSetting.valueFieldsNameMeasureL]
      })
      return val
    },
    updateSqlChart (originData) {
      this.chartDom = document.getElementById(`${this.selfGadgetUuid}`)
      if (!this.chartDom) {
        setTimeout(() => {
          this.repeatNumber++
          this.updateSqlChart(originData)
        }, 1000)
      } else {
        this.chartOption = this.$options.data.call(this).chartOption
        this.repeatNumber = 0
        let myChart = Echarts.init(this.chartDom, null, { renderer: 'svg'})
        // this.chartOption.title.text = this.gadgetSetting.title
        // this.chartOption.grid.height = this.gadgetSetting.gridHeight
        // this.chartOption.grid.top = this.gadgetSetting.gridTop
        this.chartOption.xAxis.name = this.gadgetSetting.xName
        this.chartOption.yAxis.name = this.gadgetSetting.yName
        let fontSize = this.gadgetSetting.labelFontSize
        let tempX = []
        let tempGroup = []
        for (let i = 0; i < originData.length; i++) {
          tempX.push(originData[i][this.gadgetSetting.valueFieldsNameMeasureX])
          tempGroup.push(originData[i][this.gadgetSetting.valueFieldsNameMeasureGroup])
        }
        tempX = this._.uniq(tempX)
        tempGroup = this._.uniq(tempGroup)
        this.chartOption.xAxis.data = tempX
        this.chartOption.legend.data = tempGroup
        let lastList = []
        for (let i = 0; i < tempGroup.length; i++) {
          const groupItem = tempGroup[i]
          lastList.push({
            name: groupItem,
            type: 'bar',
            barGap: '10%',
            label: {
              show: true,
              fontSize,
              formatter: '{c}'
            },
            data: []
          })
          for (let ii = 0; ii < originData.length; ii++) {
            const item = originData[ii]
            if (item[this.gadgetSetting.valueFieldsNameMeasureGroup] === groupItem) {
              lastList[i].data[tempX.findIndex(e => e === item[this.gadgetSetting.valueFieldsNameMeasureX])] = item[this.gadgetSetting.valueFieldsNameMeasureY]
            }
          }
          if (lastList[lastList.findIndex(e => e.name === groupItem)].data.length === 0) {
            lastList.splice(lastList.findIndex(e => e.name === groupItem), 1)
          }
          this.chartOption.series = lastList
        }

        if (this.gadgetSetting.type === 'StackingColumn') {
          for (let i = 0; i < this.chartOption.series.length; i++) {
            this.chartOption.series[i]['stack'] = 'stack'
          }
        }
        if (this.gadgetSetting.type === 'Bar') {
          let oldX = this._.cloneDeep(this.chartOption.xAxis)
          let oldY = this._.cloneDeep(this.chartOption.yAxis)
          this.chartOption.xAxis = oldY
          this.chartOption.yAxis = oldX
          this.chartOption.yAxis.nameRotate = 0
          this.chartOption.yAxis.axisLabel.rotate = 0
          this.chartOption.xAxis.nameGap = 10
          this.chartOption.xAxis.nameRotate = -90
        }
        if (this.gadgetSetting.valueFieldsNameMeasureL) {
          this.chartOption = this.resetOptions(this.chartOption, originData)
        }
        if (this.gadgetSetting.color.length > 0) {
          this.chartOption.color = this.gadgetSetting.color
        }
        if (this.gadgetSetting.goal && this.gadgetSetting.goalcolor) {
          this.chartOption.series.unshift({
            data: new Array(this.chartOption.series[0].data.length).fill(Number(this.gadgetSetting.goal)),
            type: 'line',
            symbolSize: 0,
            lineStyle: {
              width: 1,
              color: this.gadgetSetting.goalcolor
            }
          })
        }
        if (this.gadgetSetting.showYaxisRight) {
          if (this.gadgetSetting.type === 'Bar') {
            this.setXaxisRight(this.chartOption)
          } else {
            this.setYaxisRight(this.chartOption)
            this.chartOption.xAxis.nameGap = 25
          }
        }
        this.setLabel(this.chartOption)
        myChart.setOption(this.setCustomColorX(this.chartOption))
        this.$erd.listenTo(this.chartDom, element => {
          this.$nextTick(() => {
            this.resized()
          })
        })
      }
    },
    setLabel (val) {
      val.series.forEach(item => {
        if (item.label) {
          item.label.show = this.gadgetSetting.showlabel
        }
      })
    },
    setYaxisRight (val) {
      val.series.forEach((item, index) => {
        var res = this.gadgetSetting.useRightyAxis.some(i => i === item.name)
        if (res) {
          item.yAxisIndex = 1
        } else {
          item.yAxisIndex = 0
        }
      })
      var temp = val.yAxis
      val.yAxis = []
      val.yAxis.push(temp)
      val.yAxis.push({
        type: 'value',
        name: this.gadgetSetting.YaxisRightLabel,
        min: this.gadgetSetting.yAxismin,
        max: this.gadgetSetting.yAxismax,
        position: 'right',
        // axisLabel: {
        //   formatter: '{value}' // 61A0A8
        // },
        axisLabel: {
          formatter: this.gadgetSetting.rightyAxisPercentage ? (value) => {
            return value * 100 + '%'
          } : '{value}' // 61A0A8
        },
        axisLine: {
          lineStyle: {
            color: '#61A0A8'
          }
        },
        nameTextStyle: {
          align: 'right'
        }
      })
      let data1 = val.series[0].data.map(i => i.value)
      if (val.series[1]) {
         var data2 = val.series[1].data.map(i => i.value)
      }     
      if(val.series[2]){
        var data3 = val.series[2].data.map(i => i.value)
      }
      let rowNum = val.series[0].data.length
      if(data3 && Array.isArray(data3)){
        if(this._.max(data2)>this._.max(data1)){
          data1 = data2
        }
        data2 = data3
      }      
      let max1 = Math.max(...data1)
      let max2 = Math.max(...data2)
      let min1 = Math.min(...data1)
      let min2 = Math.min(...data2)
      const rat1 = min1 / max1
      const rat2 = min2 / max2
      /* 比例大小对比 */
      const ratState = rat1 > rat2
      /* 设置极小值 */
      if (ratState) {
        min1 = rat2 * max1
      } else {
        min2 = rat1 * max2
      }
      const inter1 = Math.ceil((max1 - min1) / rowNum)
      const inter2 = Math.ceil((max2 - min2) / rowNum)
      min1 = Math.floor(min1 / inter1) * inter1
      max1 = Math.ceil(max1 / inter1) * inter1
      min2 = Math.floor(min2 / inter2) * inter2
      max2 = Math.ceil(max2 / inter2) * inter2
      val.yAxis[0].scale = true
      val.yAxis[0].min = min1
      val.yAxis[0].max = max1
      val.yAxis[0].interval = inter1
      val.yAxis[1].scale = true
      val.yAxis[1].min = min2
      val.yAxis[1].max = max2
      val.yAxis[1].interval = inter2
    },
    setXaxisRight (val) {
      val.series.forEach((item, index) => {
        var res = this.gadgetSetting.useRightyAxis.some(i => i === item.name)
        if (res) {
          item.xAxisIndex = 1
        } else {
          item.xAxisIndex = 0
        }
      })
      var temp = val.xAxis
      val.xAxis = []
      val.xAxis.push(temp)
      val.xAxis.push({
        type: 'value',
        name: this.gadgetSetting.YaxisRightLabel,
        min: this.gadgetSetting.yAxismin,
        max: this.gadgetSetting.yAxismax,
        position: 'right',
        // axisLabel: {
        //   formatter: '{value}' // 61A0A8
        // },
        axisLabel: {
          formatter: this.gadgetSetting.rightyAxisPercentage ? (value) => {
            return value * 100 + '%'
          } : '{value}' // 61A0A8
        },
        axisLine: {
          lineStyle: {
            color: '#61A0A8'
          }
        }
      })
      const data1 = val.series[0].data.map(i => i.value)
      const data2 = val.series[1].data.map(i => i.value)
      const rowNum = val.series[0].data.length
      let max1 = Math.max(...data1)
      let max2 = Math.max(...data2)
      let min1 = Math.min(...data1)
      let min2 = Math.min(...data2)
      const rat1 = min1 / max1
      const rat2 = min2 / max2
      /* 比例大小对比 */
      const ratState = rat1 > rat2
      /* 设置极小值 */
      if (ratState) {
        min1 = rat2 * max1
      } else {
        min2 = rat1 * max2
      }
      const inter1 = Math.ceil((max1 - min1) / rowNum)
      const inter2 = Math.ceil((max2 - min2) / rowNum)
      min1 = Math.floor(min1 / inter1) * inter1
      max1 = Math.ceil(max1 / inter1) * inter1
      min2 = Math.floor(min2 / inter2) * inter2
      max2 = Math.ceil(max2 / inter2) * inter2
      val.xAxis[0].scale = true
      val.xAxis[0].min = min1
      val.xAxis[0].max = max1
      val.xAxis[0].interval = inter1
      val.xAxis[1].scale = true
      val.xAxis[1].min = min2
      val.xAxis[1].max = max2
      val.xAxis[1].interval = inter2
    },
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
      this.query()
    },
    showQueryModel () {
      this.queryModelDefaultSetting.showSetting = true
    },
    resized (i, newH, newW, newHPx, newWPx) {
      this.gadgetHeight = newH * 20 - this.heightoffset - 15
      this.gadgetWidth = newWPx
    },
    containerResizedEvent (i, newH, newW, newHPx, newWPx) {
      this.chartWidth = (newWPx - 10) + 'px'
    },
    upgradeGadgetSetting (setting) {

    },
    getRegressionChart (chartData, chartTitle, chartId, regType, regOrder, myChart) {
      let regressionDemo = ecStat.regression(regType, chartData, regOrder)
      regressionDemo.points.sort(function (a, b) {
        return a[0] - b[0]
      })

      return {
        name: 'line',
        type: 'line',
        showSymbol: false,
        lineStyle: {
          // type: "dashed",
          color: '#f00'
        },
        data: regressionDemo.points
      }
    },
    query (e) {
      this.gadgetSetting = this._.merge(this.gadgetSetting, this.queryModelDefaultSetting.dataInfo.gadgetSetting)
      if (e !== 'auto') {
        this.loading = true
      }
      var _self = this
      var obj = JSON.parse(JSON.stringify(this.slicer))
      let tempObj = this.returnReportLinkParam()
      if (tempObj['name'] && this.slicer['name'] && tempObj['name'] === this.slicer['name']) delete this.slicer['name']
      for (var key in obj) {
        if (key === 'id') {
          delete obj.id
        }
      }
      var param = {
        ...obj,
        code: this.code,
        gadgettype: this.wgadgettype,
        widgetName: this.wName,
        slicer: { ...this.slicer },
        pageId: this.pageId,
        gadgetId: this.id,
        filter: this.getFilterStr(),
        type: this.filterType
      }
      _self.queryData = []
      this.$interface.reports.getReportDataInfo(param).then(({ data: res }) => {
        try {
          _self.$parent.$parent.$parent.$parent.$parent.$parent.selectFields = res.selectFields
        } catch (error) {

        }
        _self.verifyHasData(res)
        if (res.config) {
          _self._.merge(_self.gadgetSetting, res.config)
          if (!_self.gadgetSetting.headerDescription || _self.gadgetSetting.headerDescription === null) {
            _self.gadgetSetting.headerDescription = ''
          }
          _self.upgradeGadgetSetting(_self.gadgetSetting)
        }

        if (res.name) {
          _self.widgetName = res.name
        } else if (this.wName) {
           _self.widgetName = this.wName
        }  else {
          _self.widgetName = _self.gadgetSetting.headerTitle
        }
        this.fxFields = res.fxFields || []
        if (res.data) {
          this.currentTime = new Date()
          _self.queryData = res.data
          _self.selectFields = res.selectFields
          _self.conditionFormat = res.conditionFormat.reverse()
          _self.linkedDatasetList = res.datasetSync
          // if (Array.isArray(this.selectFields) && this.selectFields.length === 0 && (Array.isArray(res.data) && res.data.length > 0)) {
          //   _self.updateSqlChart(res.data)
          // } else {
          //   _self.updateChart(res.data)
          // }
          _self.computedData(res.data)
          
        }
      }).catch((error) => {
          if (this.wName) {
          this.widgetName = this.wName
        }
        Echarts.init(_self.chartDom).dispose()
        _self.isHasData = false
        _self.loading = false
        if (error.response && error.response.status === 504) {
          this.errorStatus = '504'
          this.gadgetMessageBus.$emit(this.pageId + 'stopautorefresh')
        }
      }).finally(() => {
        this.currentTime = new Date()
        this.autoRefreshQuery(e)
        this.updateGadgetLoadingStatus(!this.loading)
      })
    },
    load (args) {
      args.chart.series[0].marker.dataLabel.font.color = '#000000'
    },
    computedData(data) {
      let arr = []
      arr = this._.uniqBy(JSON.parse(JSON.stringify(data)),this.gadgetSetting.litikufenzu)
      this.activeName = 0
      arr.forEach(item=>{
        item.tableData = data.filter(i=>i[this.gadgetSetting.litikufenzu] === item[this.gadgetSetting.litikufenzu])
      })
      this.list = arr
    },
    handleRowStyle (args) {
      try {
        let rowIndex
        let stylejson = {}
        var res = this.conditionFormat
        if (args.row) {
          res.forEach(it => {
            if (it) {
              let str = ''
              it.dataForm.filters.rules.forEach(ii => {
                var val = args.row[args.column.label] ? args.row[args.column.label].toString() : ''
                if (ii.type === 'date' || ii.type === 'datetime') {
                  val = moment(val).format("YYYY-MM-DD")
                  let dateRange = ii.valueList && Array.isArray(ii.valueList) ? ii.valueList : []
                  if (dateRange.length) {
                    let operator = it.dataForm.filters.condition === 'and' ? '&&' : '||'
                    if (dateRange.length === 1) {
                      if (dateRange[0].startTime === dateRange[0].endTime) {
                        str += (!str ? '' : operator) + `('${val}' ${ii.opt} '${dateRange[0].startTime}')`
                      } else {
                        if (ii.opt === '==') {
                          str += (!str ? '' : operator) + `('${val}' >= '${dateRange[0].startTime}' && '${val}' <= '${dateRange[0].endTime}')`
                        }
                        if (ii.opt === '!=') {
                          str += (!str ? '' : operator) + `('${val}' < '${dateRange[0].startTime}' || '${val}' > '${dateRange[0].endTime}')`
                        }
                        if (ii.opt === '>') {
                          str += (!str ? '' : operator) + `('${val}' > '${dateRange[0].endTime}')`
                        }
                        if (ii.opt === '>=') {
                          str += (!str ? '' : operator) + `!('${val}' < '${dateRange[0].startTime}')`
                        }
                        if (ii.opt === '<') {
                          str += (!str ? '' : operator) + `('${val}' < '${dateRange[0].startTime}')`
                        }
                        if (ii.opt === '<=') {
                          str += (!str ? '' : operator) + `!('${val}' > '${dateRange[0].endTime}')`
                        }
                      }
                    } else if (ii.opt === '==' || ii.opt === '!=') {
                      let result = ''
                      if (ii.opt === '==') {
                        dateRange.forEach(v => {
                          result += `('${val}' >= '${v.startTime}' && '${val}' <= '${v.endTime}')||`
                        })
                      } else {
                        dateRange.forEach(v => {
                          result += `('${val}' < '${v.startTime}' || '${val}' > '${v.endTime}')&&`
                        })
                      }
                      if (result.substr(-2) === '||' || result.substr(-2) === '&&') {
                        result = result.substr(0, result.length - 2)
                      }
                      str += (!str ? '' : operator) + result
                    } else if (ii.opt === '>') {
                      str += (!str ? '' : operator) + `('${val}' > '${dateRange[dateRange.length - 1].endTime}')`
                    } else if (ii.opt === '>=') {
                      str += (!str ? '' : operator) + `!('${val}' < '${dateRange[0].startTime}')`
                    } else if (ii.opt === '<') {
                      str += (!str ? '' : operator) + `('${val}' < '${dateRange[0].startTime}')`
                    } else if (ii.opt === '<=') {
                      str += (!str ? '' : operator) + `!('${val}' > '${dateRange[dateRange.length - 1].endTime}')`
                    }
                  }
                } else {
                  if (ii.opt === '==' || ii.opt === '!=') {
                    if (!str) {
                      str += `("${(val).toString()}"  ${ii.opt}   "${(ii.value).toString()}")`
                    } else {
                      if (it.dataForm.filters.condition === 'and') {
                        str += `&& ("${(val).toString()}"  ${ii.opt}   "${(ii.value).toString()}")`
                      } else {
                        str += `|| ("${(val).toString()}"   ${ii.opt}   "${(ii.value).toString()}")`
                      }
                    }
                  } else {
                    if (!str) {
                      str += (Number(val) + ii.opt + Number(ii.value))
                    } else {
                      if (it.dataForm.filters.condition === 'and') {
                        str += `&& (${Number(val)}   ${ii.opt}   ${Number(ii.value)})`
                      } else {
                        str += `|| (${Number(val)}   ${ii.opt}   ${Number(ii.value)})`
                      }
                    }
                  }
                }
              })
              let res1 = eval(`${str}`)
              if (res1) {
                if (it.entireRow === 'row') {
                  rowIndex = args.rowIndex
                  stylejson.color = it.textColor
                  stylejson.backgroundColor = it.backgroundColor
                }
              }
            }
          })
          stylejson.height = this.gadgetSetting.report.rowHeight ? this.gadgetSetting.report.rowHeight + 'px' : '35px'
          stylejson.padding = '0'
          if (args.rowIndex === rowIndex) {
            return stylejson
          }
          return stylejson
        }
      } catch (error) {
        console.log(error);
      }

    },
    handleCellStyle (args) {
      try {
        let rowIndex
        let color
        let bgc
        var res = this.conditionFormat
        if (args.row) {
          res.forEach(it => {
            if (it) {
              let str = ''
              it.dataForm.filters.rules.forEach(ii => {
                let val
                if (this.gadgetSetting.litikuymeasure === ii.key) {
                  if (this.gadgetSetting.litikuymeasure === ii.key) {
                    val = args.row[args.column.label] ? args.row[args.column.label].toString() : ''
                  } else {
                    val = ''
                  }
                  if (ii.opt === '==' || ii.opt === '!=') {
                    if (!str) {
                      str += `("${(val).toString()}"  ${ii.opt}   "${(ii.value).toString()}")`
                    } else {
                      if (it.dataForm.filters.condition === 'and') {
                        str += `&& ("${(val).toString()}"  ${ii.opt}   "${(ii.value).toString()}")`
                      } else {
                        str += `|| ("${(val).toString()}"   ${ii.opt}   "${(ii.value).toString()}")`
                      }
                    }
                  } else {
                    if (!str) {
                      str += (Number(val) + ii.opt + Number(ii.value))
                    } else {
                      if (it.dataForm.filters.condition === 'and') {
                        str += `&& (${Number(val)}   ${ii.opt}   ${Number(ii.value)})`
                      } else {
                        str += `|| (${Number(val)}   ${ii.opt}   ${Number(ii.value)})`
                      }
                    }
                  }
                }
              })
              let res1 = eval(`${str}`)
              if (res1) {
                if (it.entireRow !== 'row') {
                  rowIndex = args.rowIndex
                  color = it.textColor
                  bgc = it.backgroundColor
                }
              }
            }
          })
          if (args.rowIndex === rowIndex) {
            return `backgroundColor: ${bgc};color:${color};padding:0`
          }
          return `padding:0`
        }

      } catch (error) {
        console.log(error);
      }

    },
    tableCellClick (rowData, columnData) {
      if(columnData.property === this.gadgetSetting.litikuxdimension) {
        return
      }
      rowData[this.gadgetSetting.litikuydimension] = columnData.label
      this.queryId = this.selectFields.find(item => item.alias === columnData.property) ? this.selectFields.find(item => item.alias === columnData.property).queryId : ''
      let sql = ''
      let val1 = rowData[this.gadgetSetting.litikufenzu] == null? 'is null':`= '${rowData[this.gadgetSetting.litikufenzu]}'`
      let val2 = rowData[this.gadgetSetting.litikuxdimension] == null? 'is null':`= '${rowData[this.gadgetSetting.litikuxdimension]}'`
      let val3 = rowData[this.gadgetSetting.litikuydimension] == null? 'is null':`= '${rowData[this.gadgetSetting.litikuydimension]}'`
      // if(Object.keys(rowData).includes('dimension1')) {
      //   sql = `"${this.selectFields[0].field}" = '${rowData[this.gadgetSetting.litikufenzu]}' and "${this.selectFields[1].field}" = '${rowData[this.gadgetSetting.litikuxdimension]}' and "${this.selectFields[2].field}" = '${rowData[this.gadgetSetting.litikuydimension]}'`
      // }else {
      //   sql = `"${this.findField(this.gadgetSetting.litikufenzu)}" = '${rowData[this.gadgetSetting.litikufenzu]}' and "${this.findField(this.gadgetSetting.litikuxdimension)}" = '${rowData[this.gadgetSetting.litikuxdimension]}' and "${this.findField(this.gadgetSetting.litikuydimension)}" = '${rowData[this.gadgetSetting.litikuydimension]}'`
      // }
      if(Object.keys(rowData).includes('dimension1')) {
        sql = `"${this.selectFields[0].field}" ${val1} and "${this.selectFields[1].field}" ${val2} and "${this.selectFields[2].field}" ${val3}`
      }else {
        sql = `"${this.findField(this.gadgetSetting.litikufenzu)}" ${val1} and "${this.findField(this.gadgetSetting.litikuxdimension)}" ${val2} and "${this.findField(this.gadgetSetting.litikuydimension)}" ${val3}`
      }
      this.ltkSite = `${rowData[this.gadgetSetting.litikufenzu]}-${rowData[this.gadgetSetting.litikuydimension]}-${rowData[this.gadgetSetting.litikuxdimension]}`
      this.findOriginData(sql)
    },
    findField(val) {
      let res = this.selectFields.find(i=>i.alias === val)
      if(res) {
        return res.field
      }
    },
    setColumn(data) {
      return this._.uniqBy(JSON.parse(JSON.stringify(data)),this.gadgetSetting.litikuydimension).map(i=>i[this.gadgetSetting.litikuydimension]).sort((a,b)=>(Number(a)-Number(b)))
    },
    comData(data) {
      let yList = this._.uniqBy(JSON.parse(JSON.stringify(data)),this.gadgetSetting.litikuxdimension).sort((a,b)=>(Number(a[this.gadgetSetting.litikuxdimension])-Number(b[this.gadgetSetting.litikuxdimension])))
     
      let xList = this._.uniqBy(JSON.parse(JSON.stringify(data)),this.gadgetSetting.litikuydimension)
      let keys =xList.map(item=>{
        return item[this.gadgetSetting.litikuydimension]
      })
      yList.forEach(item=>{
        keys.forEach(ii=>{
          let res = data.find(i=>i[this.gadgetSetting.litikuydimension] === ii&&i[this.gadgetSetting.litikuxdimension] === item[this.gadgetSetting.litikuxdimension])
          if(res) {
            item[ii] = res[this.gadgetSetting.litikuymeasure]
          }

        })
      })
      return yList

    },
    tableCellClassName ({ columnIndex }) {
      if(columnIndex!==0) {
        return 'noShow'
      }
    },
  }
})
</script>
<style lang="scss" scoped>
.content-wrapper {
  position: relative;
  .gadget-no-newdata {
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    margin: 0 auto;
    .widgets-no-data {
      display: flex;
      flex-direction: column;
      align-items: center;
      .widgets-tip {
        margin-top: 5px;
      }
    }
  }
}
::v-deep .el-tabs__content {
  height: calc(100% - 52px)!important;
}
::v-deep .el-tabs__header {
  margin:0!important
}
::v-deep .noShow {
  color: rgba(1,1,1,0);
}
.tabsMain {

// border: 1px solid #dcdfe6;

// box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);

margin: 0;

}

.tabsMain>div {

padding: 10px;

}

.tabsList {

width: 100%;

background: #f5f7fa;

overflow: hidden;

}

.tabsList li {

float: left;

padding: 0 20px;

height: 40px;

box-sizing: border-box;

line-height: 40px;

list-style: none;

font-size: 14px;

font-weight: 500;

color: #303133;

transition: all .3s cubic-bezier(.645, .045, .355, 1);

border: 1px solid transparent;

margin-bottom: -1px;

cursor: pointer;

}

.tabsList li.active {

color: #409eff;

background-color: #fff;

border-right-color: #dcdfe6;

border-left-color: #dcdfe6;

white-space: nowrap;

position: relative;

transition: transform .3s;

z-index: 2;

}

.tabsList li:first-child {

margin-left: -1px;

}

.tabsList li:last-child {

margin-right: -1px;

}
::v-deep .el-table__row {
  height: 92px!important;
}
::v-deep .cell {
  padding: 0!important;
  text-align: center;
}
</style>
<style scoped>
.el-card ::v-deep .el-card__body {
  padding: 0px !important;
}

.el-card ::v-deep .el-divider--horizontal {
  margin: 3px 0 !important;
}

.threepoints {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cardHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 20px;
  border-bottom: 1px solid #eee;
  position: relative;
}

.cardTitle {
  font-size: 16px;
  color: #000;
  font-weight: 700;
  display: inline-block;
  max-width: calc(100% - 30px);
  position: relative;
  top: 2px;
}

.cardIcon {
  font-size: 16px;
  font-weight: 600;
  margin-left: 10px;
  position: relative;
  top: -2px;
}
</style>
<style lang="scss">
.bar-gadget-css {
  .el-card__body {
    width: 100%;
    height: 100%;
  }
  .control-section2 {
    width: 100%;
    height: calc(100% - 34px);
  }
}
</style>
